<div class="span12">
    <div class="box gradient">
        <div class="title">
            <h4>
                <span>Information</span>
            </h4>
        </div>
        <div class="content noPad clearfix">
            <table style="width: 100%">
                <tbody>
                    <tr>
                        <td style="width: 20%">
                            <label>Date:</label>
                            <span> {{bon_commande.date|date('d/m/Y')}}</span>
                        </td>
                        <td style="width: 20%">
                            <label>Heure:</label>
                            <span> {{bon_commande.getTime}}</span>
                        </td>
                        <td style="width: 20%">
                            <label>Client:</label>
                            <span>{{bon_commande.client}}</span>
                        </td>
                        <td style="width: 40%">
                            <label>Reference:</label>
                            <span>{{bon_commande.reference}}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div> 
    </div>
</div>
<div class="span12"  style="margin-left:0">
    <div class="box">

        <div class="title">

            <h4>
                <span class="icon16 brocco-icon-grid"></span>
            </h4>
            <a style="display: block;" href="#" class="minimize">Minimize</a>
        </div>
        <div style="display: block;" class="content noPad">
            <table class="responsive table table-bordered">
                <thead>
                    <tr>
                        <th style="width:5%;text-align: center">N°</th>
                        <th style="width:30%">Reference</th>
                        <th style="width:45%">Designation</th>
                        <th>Qte</th>
                    </tr>
                </thead>
                <tbody id="table_bon_commande">
                    {% set total_ttc = 0 %}
                    {% for i,ligne in lignes %}
                        <tr>
                            <td style="text-align: center">{{i+1}}</td>
                            <td>{{ligne.article.reference}}</td>
                            <td>{{ligne.article.designation}}</td>
                            <td>{{ligne.quantite|number_format(2)}}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="span2" style="margin-right: 0">
        <table>
            <tr>
                <td><input style="width:100px" type="button" class="btn btn-info cut-icon-previous"  value="Retour" onclick="retourListeBonCommande()"></td>
                <td><input style="width:100px" id="pointage"type="button" class="btn btn-success"  value="Pointer" onclick="pointer()"></td>
            </tr>
            <tr>
                <td style="height: 20px"></td>
            </tr>
            <tr>
                <td><input style="width: 100px" type="button" class="btn btn-info cut-icon-previous"  value="Imprimer" onclick=""></td>
            </tr>
        </table>
    </div>

    <script>
                    function retourListeBonCommande() {
                        $.ajax({
                            url: "{{ path('gds_liste_bon_commandes') }}",
                            data: 'retour=true' + '&numero=' + lf[0] + '&raison_social=' + lf[1] + '&date1=' + lf[2] + '&date2=' + lf[3] + '&heure1=' + lf[4] + '&heure2=' + lf[5]
                                    + '&reference=' + lf[6] + '&designation=' + lf[7] + '&is_cloture=' + lf[10]+'&departement='+lf[11],
                            success: function(data) {
                                $('#div_liste_bon_commande').replaceWith(data)
                                $('#filtre_numero').val(lf[0])
                                $('#filtre_raison_social').val(lf[1])
                                $('#filtre_date1').val(lf[2])
                                $('#filtre_date2').val(lf[3])
                                $('#filtre_reference').val(lf[6])
                                $('#filtre_designation').val(lf[7])
                                $('#filtre_type').val(lf[10])
                                $('#departement').val(lf[11])
                            }
                        })
                    }
                    function pointer(){
                        if($('#pointage').val()=='Pointer'){
                            $('#pointage').val('Refraichir')
                            $('#pointage').switchClass( "btn-success", "btn-info", 1000 );
                            $('#table_bon_commande tr').click(function(){
                                $(this).hide()
                            })
                        }else{
                            $('#pointage').val('Pointer')
                            $('#pointage').switchClass( "btn-info", "btn-success", 1000 );
                            $('#table_bon_commande tr').each(function(){
                                $(this).show()
                            })
                            $('#table_bon_commande tr').click(function(){
                                $(this).show()
                            })
                        }
                    }
        </script>